<!-- 标记区域 -->

<template>
  <div class="Secure-MapView-area">
    <div class="Secure-MapView-area-bg" :style="bgStyle" />
    <div class="Secure-MapView-area-dot" v-for="(item, i) in area" :key="i" :style="getDotStyle(item)" />
    <div class="Secure-MapView-area-mouse" v-show="obj.left && obj.top" :style="getDotStyle([obj.left, obj.top])" />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import ViewArea from '../ViewArea'

// ============================== 导出组件 ============================== //

export default CORE.extend(ViewArea, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MarkArea',

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    ...ViewArea.computed,

    /**
     * 多边形区域
     */
    area() {
      return this.obj.area
    },
  },
})
</script>
